<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <!-- 1.安装 vue-router 路由模块 -->
    <script src="./lib/vue-router.js"></script>
    <style>
        .router-link-active,
        .active {
            color: #000;
            font-size: 20px;
            font-weight: bold;
        }
        
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(150px);
        }
        
        .v-enter-active,
        .v-leave-active {
            transition: all 0.6s ease;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- <a href="#/login">登陆</a>
        <a href="#/register">注册</a> -->

        <!-- router-link 默认渲染为一个 a 标签 -->
        <router-link to="/login">登陆</router-link>
        <router-link to="/register">注册</router-link>

        <!-- 这是 vue-router 提供的元素，专门用来当作占位符的，将来路由规则匹配到的组件就会展示到这恶 router-view 中去 -->
        <!-- 所以：我们可以把 router-view 认为是一个占位符 -->
        <transition mode="out-in">
            <router-view></router-view>
        </transition>
    </div>
    <script>
        // 组件的模板对象
        var login = {
            template: '<h1>登陆模块</h1>'
        }

        var register = {
            template: '<h1>注册模块</h1>'
        }

        // 2.创建一个路由对象，当导入 vue-router 包之后，在 window 全局对象中就有了一个路由的构造函数，叫做 vueRouter
        var router = new VueRouter({
            // 这个配置对象中的 route 表示 【路由匹配规则】 的意思
            // route
            // 路由匹配规则
            routes: [
                // 每个路由规则，都是一个对象，这个规则对象身上有两个必须的属性
                // 属性1是 path ，表示监听那个路由链接地址
                // 属性2是 component ，表示如果路由是前面匹配到的path，则展示 component 属性对应的那个组件
                // 注意：component的属性值必须是一个组件模板对象，不能是组件的引用名称
                // {
                //     path: '/',
                //     component: login
                // },
                // 这里的 redirect 和 Node 中的 redirect 完全是两码事
                {
                    path: '/',
                    redirect: '/login'
                }, {
                    path: '/login',
                    component: login
                }, {
                    path: '/register',
                    component: register
                }
            ],
            linkActiveClass: 'active'
        })

        var vm = new Vue({
            el: '#app',
            data: {

            },
            methods: {

            },
            // 将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
            router: router
        });
    </script>
</body>

</html>